<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link href="../css/framework7.material.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <title>商品详情</title>
    <style type="text/css">
    body {
        background: #f3f3f3;
        font-size: 14px;
        overflow: auto;
    }
    .aui-slide-page-active{
        background: #ff6b6b;
    }
    .proTitle{
        width: 85%;
        float: left;
        font-size: 12px;
        padding-right: 8px;
        padding-top:2px;
    }
    .fenxiang{
        width: 15%;
        float: left;
        text-align: right;
        position: relative;
        display: table;
    }
    .fenxiang:before{
        content:"";
        position: absolute;
        left:0;
        top:10%;
        bottom:0;
        height: 80%;
        width: 1px;
        background: #8f8f94;
    }
    .aui-list-view i.aui-iconfont{
        margin:0;
    }
    .fenxiang,.fenxiang i.aui-iconfont{
        color:#000;
    }
    .price{
        color:#ff0005;
        font-size: 20px;
        font-weight: bold;
        margin-right: 8px;
    }
    .divPrice{
        font-size: 12px;
    }
    .kuaidi span{
       text-align: center;
    }
    .huise{
        color:#646464;
     }
    .ulTitle .aui-list-view-cell:after{
        border: none;
    }
    .ulTitle{
        padding-top:10px;
    }
    .ulTitle .aui-list-view-cell{
        padding:2px 10px;
    }
    .mt10{
        margin-top: 10px;
    }
    .aui-list-view{
        padding:8px 0;
    }
    .aui-list-view:after{
        border-bottom: 1px solid #c8c7cc;
        border-top: 0;

    }
    .fz12{
        font-size: 12px;
    }
    .ulGuige{
        padding-top:0 !important;
    }
    .ulGuige li:first-of-type{
        height: 40px;
        line-height: 40px;
        margin-bottom:8px;
    }
    .ulGuige li:first-of-type:after{
        border-bottom: 1px solid #c8c7cc;
    }
    .aui-badge{
        background: none;
    }
    .manyiStart .aui-iconfont{
        color:#ff1a1a !important;
        padding:0 !important;
    }
    .aui-btn-primary.aui-btn-outlined{
        border-color:#9c9c9c;
        color:#9c9c9c;
    }
    .aui-text-center .aui-btn-block {
        width: inherit;
        display: inline-block;
        padding:10px 15px;
    }
    .shangla{
        text-align: center;
        position: relative;

    }
    .shangla:before{
        position: absolute;
        border-bottom:1px solid #9c9c9c;
        top:50%;
        content:"";
        left:0;
        right: 0;
        z-index: 0;
    }
    .shangla span{
        display: inline-block;
        padding:5px;
        background: #f3f3f3;
        z-index: 99;
        position: relative;

    }
    .gs-ul {
        padding:0;
    }
    .gs-ul .aui-img-body{
        padding-top:15px;
    }
    .xiangqin-img img{
        width: 100%;
    }
    /*商品规格上拉*/
    .guige{
        /*position: relative;*/
        /*top: 45px;*/
    }
    .close-picker{
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 9999;
    }
    .guige .aui-img-body{
        padding-top: 15px;
    }
    .guige .guige-price{
        margin-top: 15px;
        color:#ff3333;
        font-weight: bold;
    }
    .guige .aui-list-view .aui-img-object{
        max-width: 100px;
        height: 100px;
        line-height: 100px;
        border:1px solid #ececec;
        padding: 3px;
    }
    .guigehuise{
        color:#d9d9d9;
    }
    .spanBefore{
        text-align: left;
    }
    .spanAfter{
        text-align: right;
    }
    .spanBefore:after{
        position: absolute;
        content:"";
        right:0;
        width: 1px;
        top:10%;
        height: 80%;
        background: #d9d9d9; 
    }
    .spanAfter:after{
        position: absolute;
        content:"";
        left:0;
        width: 1px;
        top:10%;
        height: 80%;
        background: #d9d9d9; 
    }
    .spanBefore,.spanAfter{
        width: 7%;
        position: relative;
    }
    .spanBefore,.spanAfter,.guige-color{
        float:left;
    }
    .guige-color{
        padding-left:1.6%;
        font-size: 12px;
        width: 86%;   
        /*overflow: hidden;*/
    }
    .guige .aui-list-view{
        margin-bottom:0; 
    }
    .guige-color li{
        float: left;
        padding-right:1.6%;
        width: 25%;
        height: 24px;
        line-height: 24px;
    }
    .shuxing{
        background: #fff;
    }
    .shuxing li{
        line-height: 35px;
        overflow:hidden;
        padding:15px 0;
    }
    .chicun{
        margin-right:5%;
    }
    .kucun{
        margin-right:5%;
    }
    .mui-numbox [class*=btn-numbox]{
        width: 25px;
    }
    .mui-numbox{
        padding:0 26px;
        width: 85px;
    }
    .mui-numbox .mui-input-numbox{
        height: 33px;
    }
    .totalNum,.totalMoney{
        color:#ff3333;
    }
    .jiesuan{
        position: fixed;
        z-index: 999;
        bottom:0;
        width: 100%;
        background: #fff;
        /*display: none;*/
    }
    .jiesuan li{
        width: 100%;
    }
    .jiesuan li:first-of-type{
        padding:15px 0;
        font-weight: 400;
    }
    .picker-modal{
        height: 100%;
        overflow-y: auto;
    }
    </style>
</head>
<body>
    <div class="containTitle">
        <div class="slide">
            <div id="aui-slide">
                <div class="aui-slide-wrap" >
                    <div class="aui-slide-node ">
                        <img src="../image/tese.jpg" />
                    </div>
                    <div class="aui-slide-node ">
                        <img src="../image/tese.jpg" />
                    </div>
                    <div class="aui-slide-node ">
                        <img src="../image/tese.jpg" />
                    </div>
                </div>
                <div class="aui-slide-page-wrap"><!--分页容器--></div>
            </div>
        </div>
        <ul class="aui-list-view ulTitle">
            <li class="aui-list-view-cell">
                <div class="proTitle aui-ellipsis-2">六层蘑菇婴儿毛巾浴巾六层蘑菇婴儿毛巾浴巾六层浴巾六层蘑菇婴儿毛巾浴巾六层蘑菇婴儿毛巾浴巾</div>
                <div class="fenxiang">
                     <i class="aui-iconfont aui-icon-share"></i>
                     <p>分享</p>
                </div>
            </li>
            <li class="aui-list-view-cell">
                <div class="divPrice huise"><span class="price">¥25.00</span>200条起批</div>
            </li>
            <li class="aui-list-view-cell kuaidi huise">
                <span class="aui-col-xs-4">已成交3002条</span>
                <span class="aui-col-xs-4">快递:￥8</span>
                <span class="aui-col-xs-4">发货地:石狮市石狮市石狮市</span>
            </li>
        </ul>
        <ul class="aui-list-view ulTitle " tapmode onclick="showPick()">
            <li class="aui-list-view-cell">
                <div class="aui-arrow-right aui-ellipsis-1 huise">
                规格选择
                </div>
            </li>
        </ul>
        <ul class="aui-list-view ulGuige ulTitle huise">
            <li class="aui-list-view-cell">
                <div class="aui-arrow-right aui-ellipsis-1 huise">
                产品属性
                </div>
            </li>
            <li class="aui-list-view-cell">
                <span class="aui-col-xs-4">品质标准</span>
                <span class="aui-col-xs-8">中国国家标准（GB）</span>
            </li>
            <li class="aui-list-view-cell">
                <span class="aui-col-xs-4">品名</span>
                <span class="aui-col-xs-8">牛津布  </span>
            </li>
            <li class="aui-list-view-cell">
                <span class="aui-col-xs-4">成分及含量</span>
                <span class="aui-col-xs-8">100%涤纶</span>
            </li>
        </ul>
        <ul class="aui-list-view ulTitle">
            <li class="aui-list-view-cell">
                <div class="aui-arrow-right aui-ellipsis-1 huise">
                优惠信息<span class="aui-badge huise">全店满100条可混批采购</span>
                </div>
            </li>
        </ul>
        <ul class="aui-list-view pinglun ulGuige  ulTitle ">
            <li class="aui-list-view-cell">
                <div class="aui-arrow-right aui-ellipsis-1 ">
                买家评论
                </div>
            </li>
            <li class="aui-list-view-cell">
                <span class="aui-col-xs-4">商品满意度</span>
                <span class="aui-col-xs-8 manyiStart">
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                    <i class="aui-iconfont aui-icon-favorfill"></i>
                </span>
            </li>
            <li class="aui-list-view-cell">
                <span class="aui-col-xs-12">
                    R**E:这次先买了一些打版，品质各方面都算过关，价格可以接受，一仔细看，这家很多商品花型款式都有，最主要的是大部分有现货，拍下的当天就可以发货，效率性大大的提高，等公司主管确认了就来大货，满意
                </span>
            </li>
            <li class="aui-list-view-cell huise">
                <span class="aui-col-xs-12">颜色:粉红色|颜色:紫色|颜色:黑色</span>
            </li>
            <li class="aui-text-center">
                <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-outlined fz12 mt10 ">查看全部评论</div>
            </li>
        </ul>

        <ul class="aui-list-view gs-ul">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
                <div class="aui-img-body aui-arrow-right">
                    卖家:Aileen纱纺有限公司
                    <p>2年</p>
                </div>
            </li>
        </ul>

        <div class="shangla">
            <span>继续上拉查看图文详情</span>
        </div>
        <div class="xiangqin-img">
            <img src="../image/xiangqing.jpg" alt="">
            <img src="../image/xiangqing2.jpg" alt="">
        </div>
    </div>
    <!-- 产品属性上拉 -->
    <div class="picker-modal picker-1 guige picker-info">
        <i class="aui-iconfont aui-icon-close close-picker" data-picker=".picker-1"></i>
        <ul class="aui-list-view">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                <div class="aui-img-body">
                    <div class="aui-ellipsis-2">
                        婴儿毛巾浴巾六层蘑菇童被纯棉纱布毛巾被蘑菇吸水毛巾被45棉纱布毛巾被蘑菇吸
                    </div>
                    <p class="guige-price">￥3.5-￥25</p>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <span class="spanBefore aui-iconfont aui-icon-left guigehuise">
                    
                </span>
                <ul class="guige-color">
                    <li>蘑菇白色</li>
                    <li>蘑菇白色1</li>
                    <li>蘑菇白色2</li>
                    <li>蘑菇白色3</li>
                </ul>
                <span class="spanAfter aui-iconfont aui-icon-right guigehuise">
                    
                </span>
            </li>
        </ul>
        <ul class="shuxing">
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
            <li class="aui-border-b">
                <div class="chicun  aui-pull-left">10*15cm</div>
                <div class="danjia  aui-pull-left">单价:￥3.5</div>
                <div class="mui-numbox  aui-pull-right" data-numbox-min='1' data-numbox-max='9'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input id="test" class="mui-input-numbox" type="number" value="5" />
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
                <div class="kucun aui-pull-right">
                    <span>库存:2000</span>
                </div>
            </li>
        </ul>
    </div>

            <ul class="jiesuan">
                <li class="aui-text-right aui-border-t">共<span class="totalNum">600</span>条  <span class="totalMoney">￥1236.50</span></li>
                <li><div class="aui-btn aui-btn-danger aui-btn-block">确定</div></li>
            </ul>
</body>
<script type="text/javascript" src="../script/aui-slide.js"></script>
    <script type="text/javascript" src="../script/mui.min.js"></script>
    <script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
    <script src="../script/framework7.min.js"></script>
<script type="text/javascript">
    var slide3 = new auiSlide({
        container:document.getElementById("aui-slide"),
        // "width":300,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
    var myApp = new Framework7();
    function showPick(){
       myApp.pickerModal('.picker-info');
    }
</script>
</html>